<template>
  <el-form
    :model="carForm"
    :inline="true"
    label-width="120px"
    style="display: inline-block"
    :rules="carFormRules"
    ref="carForm"
  >
    <el-row>
      <el-col :span="12">车辆信息</el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <el-form-item label="行驶证:">
      <el-upload
        action=""
        :http-request="httpRequest"
      >
        <el-button size="small">上传行驶证识别车辆信息</el-button>
        <!-- <div class="el-upload__tip" slot="tip">
          只能上传jpg/png格式的图片,且不超过500kb;
        </div> -->
      </el-upload>
    </el-form-item>
    <el-row>
      <el-col :span="8">
        <el-form-item
          label="车牌号:"
          prop="licensePlateNumber"
        >
          <el-input
            clearable
            :disabled="disabledType"
            v-model="carForm.licensePlateNumber"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="VIN码:"
          prop="vin"
        >
          <el-input
            clearable
            :disabled="disabledType"
            maxlength="17"
            v-model="carForm.vin"
            @blur="vinInputBlur"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="车型:"
          prop="carModels"
        >
          <CarModel
            v-model="carForm.carModels"
            ref="carModel"
            class="w-100"
          />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item
          label="档案号:"
          prop="recordNum"
        >
          <el-input
            clearable
            :disabled="disabledType"
            maxlength="30"
            v-model="carForm.recordNum"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="车辆属性:"
          prop="carAttribute"
        >
          <el-select
            clearable
            :disabled="disabledType"
            v-model="carForm.carAttribute"
            class="w-100"
          >
            <el-option
              v-for="item in dict['车辆属性']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="车辆颜色:"
          prop="carColor"
        >
          <el-input
            v-model="carForm.carColor"
            :disabled="disabledType"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="当前里程(KM):"
          prop="mileage"
        >
          <el-input
            clearable
            v-model="carForm.mileage"
            :disabled="disabledType"
            oninput="value=value.replace(/[^0-9]/g,'')"
            placeholder="当前里程"
          >
            <!-- <template slot="append">KM</template> -->
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="发动机号:"
          prop="engineNumber"
        >
          <el-input
            clearable
            :disabled="disabledType"
            maxlength="30"
            v-model="carForm.engineNumber"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="注册时间:"
          prop="drivingPermitDate"
        >
          <el-date-picker
            v-model="carForm.drivingPermitDate"
            :disabled="disabledType"
            type="date"
            placeholder="行驶证注册日期"
            class="w-100"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="年审到期:"
          prop="examinedDate"
        >
          <el-date-picker
            v-model="carForm.examinedDate"
            :disabled="disabledType"
            type="date"
            placeholder="年审到期"
            class="w-100"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="创建日期:"
          prop="createTime"
        >
          <el-date-picker
            v-model="carForm.createTime"
            :disabled="true"
            type="date"
            placeholder="建档日期"
            class="w-100"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item
        label="备注:"
        prop="remark"
      >
        <el-input
          type="textarea"
          :rows="3"
          clearable
          :disabled="disabledType"
          v-model="carForm.remark"
          style="min-width: 600px"
        />
      </el-form-item>
    </el-row>
    <el-col
      :span="12"
      v-if="ownedCustomer"
    >车辆所属客户</el-col>
    <el-divider
      content-position="center"
      v-if="ownedCustomer"
    ></el-divider>
    <el-row v-if="ownedCustomer">
      <el-form-item
        label="车主:"
        prop="clientId"
      >
        <CustomerSearch
          @clientForm="getfilters"
          :addCustomer="false"
          :showValue="carForm.clientName"
        />
        <!-- <el-input
          clearable
          :disabled="disabledType"
          v-model="carForm.clientId"
        /> -->
      </el-form-item>
      <el-form-item
        label="送修人:"
        prop="sendRepairName"
      >
        <el-input
          clearable
          :disabled="disabledType"
          v-model="carForm.sendRepairName"
        />
      </el-form-item>
      <el-form-item
        label="送修人电话:"
        prop="sendRepairPhone"
      >
        <el-input
          clearable
          :disabled="disabledType"
          v-model="carForm.sendRepairPhone"
        />
      </el-form-item>
    </el-row>
    <el-col :span="12">车辆保险信息</el-col>
    <el-divider content-position="center"></el-divider>
    <el-row>
      <el-form-item
        label="保险公司:"
        prop="companyName"
      >
        <el-input
          clearable
          :disabled="disabledType"
          v-model="carForm.companyName"
        />
      </el-form-item>
      <el-form-item
        label="投保日期:"
        prop="insureDate"
      >
        <el-date-picker
          v-model="carForm.insureDate"
          :disabled="disabledType"
          type="date"
          placeholder="建档日期"
          class="w-100"
        >
        </el-date-picker>
      </el-form-item>
    </el-row>

    <el-row>
      <el-col
        :span="24"
        align="right"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >{{
            ownedCustomer ? '保存' :type=='edit'?'保存':'新增车辆'
          }}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { parseTimeToYMDHMS, getDict } from '@/utils/index'
import ElRow from 'element-ui/packages/row/src/row'
import rules from './carFormRules'
import { CarModel, CustomerSearch } from '@/components/index' //导入组件库
import { drivingLicenseRecognition } from '@/utils/index'
import { mounted } from 'vuedraggable'
export default {
  components: {
    ElRow,
    CarModel,
    CustomerSearch,
  },
  name: 'DialogDataForm',
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
    type: {
      type: String,
    },
    //是否显示所属客户
    ownedCustomer: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      dict: {},
      disabledType: false,
      carForm: {
        licensePlateNumber: '', //车牌号
        vin: '', //VIN码
        carModelId: '', //车型
        carSeriesName: '', //车系
        carBrandName: '', //车品牌
        recordNum: '', //档案号
        carAttribute: '个人车辆', //车辆属性
        carColor: '', //车辆颜色
        mileage: '', //当前里程
        engineNumber: '', //发动机号
        drivingPermitDate: '', //行驶证注册日期
        examinedDate: '', //年审到期
        createTime: '', //创建日期
        remark: '', //备注
        companyName: '', //保险公司
        insureDate: '', //保险投保日期
        clientId: '', //车主id
        clientName: '', //送修人
        clientPhone: '', //送修电话
        carModels: [],
      },
      carFormRules: rules,
      renderNumber: 0,
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        if (this.type == 'edit' && this.renderNumber == 0) {
          this.carForm = newValue;
          this.rednerModes();
          this.renderNumber = 1;
        }
      },
    },
  },
  async mounted () {
    if (this.type == 'edit') {
      this.carForm = Object.assign({}, this.value)
      this.rednerModes();
    }
    this.carForm.createTime = new Date()
    this.dict = getDict(['车辆属性'])
  },
  methods: {
    vinInputBlur(event){
      this.carForm.vin=this.carForm.vin.toUpperCase();
    },
    rednerModes () {
      this.$refs.carModel.show = false
      this.carForm.carModels = [
        this.carForm.carBrandId,
        this.carForm.carSeriesId,
        this.carForm.timeType,
        this.carForm.carModelId,
      ]
      setTimeout(() => {
        this.$refs.carModel.show = true
      }, 100)
    },
    //客户信息反显
    getfilters (params) {
      console.log('客户信息', params)
      this.carForm.clientId = params.id
    },
    //行驶证识别
    httpRequest (value) {
      drivingLicenseRecognition(value.file).then((res) => {
        let {
          success,
          data: {
            ocrResult: { frontInfo },
          },
        } = res
        if (success) {
          this.carForm = {
            ...this.carForm,
            licensePlateNumber: frontInfo.plateNo,
            drivingPermitDate: parseTimeToYMDHMS(frontInfo.registerDate),
            vin: frontInfo.vin,
            engineNumber: frontInfo.engineNo,
          }
        }
      })
    },
    onSubmit () {
      this.$refs.carForm.validate((valid) => {
        if (valid) {
          let options = this.carForm
          options.createTime = parseTimeToYMDHMS(options.createTime)
          options.examinedDate = options.examinedDate
            ? parseTimeToYMDHMS(options.examinedDate)
            : ''
          options.insureDate = options.insureDate
            ? parseTimeToYMDHMS(options.insureDate)
            : ''
          options.drivingPermitDate = options.drivingPermitDate
            ? parseTimeToYMDHMS(options.drivingPermitDate)
            : ''
          let modelsArry = this.$refs.carModel.getLabels() //获取选中车型的相关数据
          options = {
            ...this.carForm,
            carBrandId: this.carForm.carModels[0],
            carSeriesId: this.carForm.carModels[1],
            timeType: this.carForm.carModels[2],
            carModelId: this.carForm.carModels[3], //车型id
            carModelName: modelsArry[3], //车型名称
            carSeriesName: modelsArry[1], //车系
            carBrandName: modelsArry[0], //品牌
            timeType: modelsArry[2], //年款
          }
          this.$emit('operate', options, this.type)
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
// /deep/ .el-form-item__label {
//   width: 180px;
//   /deep/ .el-form-item__content{
//     width: 200px;
//   }
// }
</style>
